<template>
    <div class="production-plan">
      <el-button type="success" @click="addjihau" class="save-button">保存主表单和明细</el-button>
      <h3 class="title">工序列表添加</h3>
  
      <!-- 基本信息 -->
      <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="120px" class="form-container">
        <el-row :gutter="40">
          <!-- <el-col :span="8">
            <el-form-item label="工序分类" style="margin-bottom: 20px;">
              <el-input v-model="formData.processName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="工序名称" style="margin-bottom: 20px;">
              <el-input v-model="formData.processName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label=" 设备名称" style="margin-bottom: 20px;">
              <el-input v-model="formData.equipmentName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          
          <el-col :span="8">
            <el-form-item label="前置工序" style="margin-bottom: 20px;">
              <el-input v-model="formData.preprocess" placeholder="请输入前置工序"  />
            </el-form-item>
          </el-col>
          
          <el-col :span="8">
            <el-form-item label="后置工序" style="margin-bottom: 20px;">
              <el-input v-model="formData.postprocess" placeholder="请输入后置工序" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
          <el-form-item label="温度" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.temperature" placeholder="请输入温度" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="压力" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.pressure" placeholder="请输入压力" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="过滤速度" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.filtrationSpeed" placeholder="请输入过滤速度" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="洗糟水用量" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.waterUsage" placeholder="请输入洗糟水用量" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="洗糟次数" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.frequency" placeholder="请输入洗糟次数" :min="0" :step="1" />
          </el-form-item>
        </el-col>
          <el-col :span="8">
            <el-form-item label="工艺时间" prop="processTime" style="margin-bottom: 20px;">
              <el-date-picker
                v-model="formData.processTime"
                type="date"
                required
                placeholder="请选择工艺时间"
                style="width: 100%;"

              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label=" 麦芽汁的澄清度" style="margin-bottom: 20px;">
              <el-input v-model="formData.clarityWort" placeholder="请输入麦芽汁的澄清度" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label=" 热凝固物去除效果" style="margin-bottom: 20px;">
              <el-input v-model="formData.thermalCondensates" placeholder="请输入热凝固物去除效果" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label=" 冷凝固物去除效果" style="margin-bottom: 20px;">
              <el-input v-model="formData.condensation" placeholder="请输入冷凝固物去除效果" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="发酵液的浊度">
                <el-select v-model="formData.fermentTurbidity" placeholder="请选择检测方法">
                <el-option label="发酵初期" value="发酵初期" />
                <el-option label="发酵中期" value="发酵中期" />
                <el-option label="发酵后期" value="发酵后期" />
                <el-option label="成熟发酵液" value="成熟发酵液" />
                </el-select>
            </el-form-item>
        </el-col>

          <el-col :span="8">
            <el-form-item label=" 啤酒的微生物指标" style="margin-bottom: 20px;">
              <el-input v-model="formData.microbiologicalindicators" placeholder="请输入啤酒的微生物指标" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="检测方法">
                <el-select v-model="formData.detectionmethod" placeholder="请选择检测方法">
                <el-option label="浊度检测" value="浊度检测" />
                <el-option label="色度检测" value="色度检测" />
                <el-option label="压力检测" value="压力检测" />
                <el-option label="酒精含量检测" value="酒精含量检测" />
                <el-option label="原麦汁浓度检测" value="原麦汁浓度检测" />
                <el-option label="pH 值检测" value="pH 值检测" />
                </el-select>
            </el-form-item>
        </el-col>
          <el-col :span="8">
            <el-form-item label=" 操作人员" style="margin-bottom: 20px;">
              <el-input v-model="formData.operators" placeholder="请输入操作人员"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作时间" prop="operatingTime" style="margin-bottom: 20px;">
              <el-date-picker
                v-model="formData.operatingTime"
                type="date"
                required
                placeholder="请选择操作时间"
                style="width: 100%;"
                disabled
              ></el-date-picker>
            </el-form-item>
          </el-col>
  

          <el-col :span="8">
            <el-form-item label=" 操作步骤" style="margin-bottom: 20px;">
              <el-input v-model="formData.procedure" placeholder="请输入操作步骤" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label=" 安全注意事项" style="margin-bottom: 20px;">
              <el-input v-model="formData.safetyPrecautions" placeholder="请输入安全注意事项" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料流向" style="margin-bottom: 20px;">
              <el-input v-model="formData.material" placeholder="请输入定期取样检测" />
            </el-form-item>
          </el-col>
        
          <el-col :span="8">
            <el-form-item label="清洁与消毒要求" style="margin-bottom: 20px;">
              <el-input v-model="formData.cleaningDisinfection" placeholder="请输入操作人"  />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="清洗与维护" style="margin-bottom: 20px;">
              <el-input v-model="formData.cleaningMaintenance" placeholder="请输入操作人"  />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useRouter, useRoute } from 'vue-router';
  import { Materialread, Materialwrite } from '@/axios/axiosHelper';
  import axios from 'axios';
  import { th } from 'element-plus/es/locales.mjs';
  
  const formRef = ref(null);
  const currentUser = ref("admin");
  const router = useRouter();
  const route = useRoute();
  
  // 主表单数据
  const formData = reactive({

        
        "processName": "",
        "equipmentName": "",
        "preprocess": "",
        "postprocess": "",
        "temperature": '',
        "pressure": '',
        "filtrationSpeed": '',
        "waterUsage": '',
        "frequency": '',
        "processTime": "",
        "clarityWort": "",
        "thermalCondensates": "",
        "condensation": "",
        "fermentTurbidity": "",
        "microbiologicalindicators": "",
        "detectionmethod": "",
        "operators": currentUser.value,
        "operatingTime":new Date().toISOString(),
        "procedure": "",
        "safetyPrecautions": "",
        "material": "",
        "cleaningDisinfection": "",
        "cleaningMaintenance": "",
        "isDel": true
  });
  
  // 主表单验证规则

  
  // 明细数据列表
  const planDetailsList = ref([]);
  const attachments = ref([]);
  
  // 保存主表单
  const addjihau = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        axios.post('https://localhost:7229/api/Process/AddProcess', formData)
          .then(response => {
            if (response.data.code === 200) {
              ElMessage.success('工序列表保存成功');
              console.log(response.data.data);
              router.push("/GetProcess");
            } else {
              ElMessage.error(`工序列表保存失败：${response.data.message}`);
            }
          });
      } else {
        ElMessage.error('请检查表单输入是否正确');
        return false;
      }
    });
  };
  
  
    </script>
    
    <style scoped>
    .production-plan {
      padding: 30px;
      background-color: #f0f2f5;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      font-family: 'Arial', sans-serif;
    }
    
    .title {
      text-align: center;
      margin-bottom: 30px;
      color: #2c3e50;
      font-size: 24px;
      font-weight: 600;
    }
    
    .save-button {
      display: block;
      margin: 0 auto 30px;
      padding: 12px 24px;
      font-size: 16px;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .form-container {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
    
    .el-form-item__label {
      color: #34495e;
      font-size: 16px;
      font-weight: 500;
    }
    
    .el-input,
    .el-input-number,
    .el-date-picker {
      border-radius: 6px;
      border: 1px solid #ccc;
      padding: 10px;
      font-size: 14px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    .el-input:focus,
    .el-input-number:focus,
    .el-date-picker:focus {
      border-color: #42b983;
      outline: none;
      box-shadow: 0 0 5px rgba(66, 185, 131, 0.2);
    }
    </style>